<link href="https://cdn.jsdelivr.net/npm/flipclock@0.7.8/compiled/flipclock.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flipclock@0.7.8/compiled/flipclock.min.js"></script>

<div class="countdown"></div>

<script>
    const now = new Date();
    const targetDate = new Date(Date.UTC(2025, 3, 14, 20, 30));
    const expireSeconds = Math.floor((targetDate - now)/ 1000);
    const countdownDiv = document.querySelector(".countdown");

    jQuery(document).ready(function($) {
        FlipClock.Lang.fa = {
            days: "روز",
            hours: "ساعت",
            minutes: "دقیقه",
            seconds: "ثانیه",
        }
        const countdown = $(".countdown").FlipClock(expireSeconds, {
            clockFace: "DailyCounter",
            countdown: true,
            language: "fa",
            callbacks: {
                stop: ()=>{
                    countdownDiv.style.opacity = 0;
                }
            }
        });

        const discoutBtn = document.querySelectorAll(".discount-btn");
        const sideDiscount = document.querySelector(".side-discount");
        discoutBtn.forEach(btn=>{
            btn.addEventListener("click", ()=>{
                if(sideDiscount.classList.contains("active")) {
                    sideDiscount.classList.remove("active")
                } else {
                    sideDiscount.classList.add("active")
                }
            })
        });

        window.addEventListener("load", ()=>{
            setTimeout(()=>{
                sideDiscount.classList.add("active")
            }, 2000)
        });
    });
</script>